import React, { useState } from 'react'
import { Toast } from 'antd-mobile'
import { login, regsiter } from '../api/index'

// export default class Login extends Component {
//     render() {
//         return (
//             <div className='loginapp'>
//                 <div className="login">
//                     <p>账号:<input type="text" placeholder='请输入账户 /  用户名' />
//                     </p>
//                     <p>密码:<input type="text" placeholder='请输入密码' />
//                     </p>
//                     <p><button>登录</button><button>注册</button></p>
//                 </div>
//             </div>
//         )
//     }
// }


export default function Login(props) {
    
    let [username, setUsername] = useState('')
    let [password, setPassword] = useState('')

    const Login = () => {
        login({ username: username, password: password }).then(res => {
            if (res.data.code === 200) {
                props.history.push("/app")
                localStorage.setItem('token', res.data.token)
                localStorage.setItem('img', res.data.data.img)
                localStorage.setItem('username', res.data.data.username)
                localStorage.setItem('isShow', true)
                // localStorage.setItem('login',JSON.stringify(res.data.data))
                Toast.show({
                    content: '登录成功',
                    position: 'top',
                })
            } else {
                Toast.show({
                    content: '账号密码错误或为空',
                    position: 'top',
                })
            }
        })
    };

    const Regsiter = () => {
        if (username === '' || password === '') {
            Toast.show({
                content: '账号密码不能为空',
                position: 'top',
            })
        } else {
            regsiter({ username: username, password: password }).then(res => {

                if (res.data.code === 200) {
                    Toast.show({
                        content: '注册成功',
                        position: 'top',
                    })
                } else {
                    Toast.show({
                        content: '账号已存在',
                        position: 'top',
                    })
                }
            })
        }
    }

    return (
        <div className='loginapp'>
            <div className="login">
                <p>
                    账号:<input value={username} onChange={(e) => {
                        setUsername(e.target.value)
                    }} placeholder='请输入账户 / 用户名' />
                </p>

                <p>
                    密码:<input value={password} onChange={(e) => {
                        setPassword(e.target.value)
                    }} placeholder='请输入密码' />
                </p>
                <p>
                    <button onClick={() => { Login() }}>
                        登录
                   </button>
                    <button onClick={() => { Regsiter() }}>
                        注册
                    </button>
                </p>
            </div>
        </div>
    )
}
































// import React, { Component } from 'react'
// import { Input, List } from 'antd-mobile'

// export default class Login extends Component {
//     state = {
//         value: ''
//     }
//     render() {
//         const { value } = this.state

//         return (
//             <div className='loginhome'>
//                 <div className="login">
//                     {/* <input type="text" placeholder='请输入账户 / 用户名'/>
//               <input type="text" placeholder='请输入密码'/> */}
//                     <List
//                         style={{
//                             '--prefix-width': '7em',
//                         }}
//                     >
//                         <List.Item prefix='用户名'>
//                             <Input placeholder='请输入用户名' clearable />
//                         </List.Item>
//                         <List.Item prefix='密码'>
//                             <Input placeholder='请输入密码' clearable type='password' />
//                         </List.Item>
//                         <button>登录</button>
//                         <button>注册</button>
//                     </List>
//                 </div>
//             </div>
//         )
//     }
// }
